<template >
    <div class="top">
        <div class="block">
            <el-image :src="add" style="height: 70px; width: 110px" @click="newjue('新增角色', '')"></el-image>
            <el-image :src="deletes" style="height: 70px; width: 110px" @click="delect()"></el-image>
            <div class="block2">
                <div class="src4">
                    <el-input
                        v-model="select"
                        prefix-icon="el-icon-search"
                        style="width: 360px; border-radius: 4px; border: 1px solid gray"
                        placeholder="综合查询"
                    ></el-input>
                </div>
                <div class="src3">
                    <el-image :src="querys" style="height: 70px; width: 110px" @click="top_query"></el-image>
                </div>
            </div>
        </div>

        <div class="tabbox">
            <el-table
                ref="multipleTable"
                :data="tableData"
                border
                :header-row-style="{ background: '#005ab5', color: '#ffffff' }"
                tooltip-effect="dark"
                style="width: 100%; margin: 0 auto"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="70px" align="center"> </el-table-column>
                <el-table-column prop="name" align="center" label="名称" min-width="5%"> </el-table-column>
                <el-table-column prop="createTime" label="开始时间" min-width="20%" align="center"> </el-table-column>
                <el-table-column prop="endTime" label="结束时间" min-width="4%" align="center"> </el-table-column>
                <el-table-column prop="content" label="描述" min-width="4%" align="center"> </el-table-column>
            </el-table>
            <div class="page-body">
                <div class="pagenum_sys">
                    <p>第{{ pageData.page }}页&nbsp;&nbsp;每页{{ pageData.pageSize }}条&nbsp;&nbsp;共{{ pageData.total }}条</p>
                </div>
                <div class="page_syss">
                    <el-button type="text" @click="toPage(1)">首页</el-button>
                    <el-button type="text" @click="prePage()">上一页</el-button>
                    <el-button type="text" @click="nextPage()">下一页</el-button>
                    <el-button type="text" @click="toPage(-1)">末页</el-button>
                    <el-button type="text" style="color: #333">第</el-button>
                    <el-input style="width: 76px" v-model="pageNum" clearable></el-input>
                    <el-button type="text" style="color: #333">页</el-button>
                    <el-button type="text" @click="toPage(pageNum)">转到</el-button>
                </div>
            </div>
            <parameter-input :formVisible="formVisible" :formData="formData" @closeDialog="closeDialog()"></parameter-input>
        </div>
        
    </div>
</template>

<script>
import '../../../common/jdCommon.css';
import ParameterInput from './parameter_input';
export default {
  components: { ParameterInput },
    data() {
        return {
            refresh: require('../../assets/imgs/imgs/刷新按钮.png'),
            deletes: require('../../assets/imgs/imgs/删除按钮.png'),
            querys: require('../../assets/imgs/imgs/查询按钮.png'),
            query_box: require('../../assets/imgs/imgs/查询框.png'),
            src5: require('../../assets/imgs/imgs/查看按钮.png'),
            src6: require('../../assets/imgs/imgs/修改按钮.png'),
            attachment: require('../../assets/imgs/imgs/附件按钮.png'),
            add: require('../../assets/imgs/imgs/组 557.png'),

            input: '',
            input2: '',
            pageData: {
                page: 1,
                pageSize: 10,
                total: ''
            },

            select: '',
            dialog: false, //弹出框
            pageNum: null,
            tableData: [],
            dialog_title: '',
            formVisible: false,
        };
    },
    created() {
        this.getpagedata();
    },
    methods: {
        // 新增角色弹框
        newjue() {
            this.formVisible=true
            this.formData=row
            
        },
        //关闭弹窗
         closeDialog(){
            this.formVisible=false;
            this.formData=null;
            //弹窗关闭之后查询一遍
            this.getpagedata();
        },

        // 搜索框
        top_query() {
           let param = {
                page: '1',
                pageSize: this.pageData.pageSize,
                word: this.select
            };
            this.$post('/sysManage/parameter/query', param).then((res) => {
                this.tableData = res.data.rows;
                this.pageData.total = res.data.total;
            });
        },
        // 删除请求
          delect() {
            let currentSelect = this.$refs.multipleTable.selection;
            currentSelect.forEach((item, index) => {
                 this.$post('/sysManage/parameter/delete/'+item.id).then((res) => { 
                 this.$message.success('删除成功!');
                 });
            });
            this.getpagedata();
        },

        // 表格数据
        getpagedata() {
            let param = {
                page: '1',
                pageSize: this.pageData.pageSize,
                word: ''
            };
            this.$post('/sysManage/parameter/query', param).then((res) => {
                this.tableData = res.data.rows;
                this.pageData.total = res.data.total;
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        prePage() {
            // 上一页
            let page = this.pageData.page;
            if (page === 1) return;
            page--;
            this.pageData.page = page;
            this.getpagedata();
        },
        nextPage() {
            // 下一页
            let total = Math.ceil(this.pageData.total / this.pageData.pageSize);
            let page = this.pageData.page;
            if (page === total) return;
            page++;
            this.pageData.page = page;
            this.getpagedata();
        },
        toPage(num) {
            // 走一页
            let total = Math.ceil(this.pageData.total / this.pageData.pageSize);

            if (num > total || num === -1) {
                num = total;
            } else if (num < 1) {
                num = 1;
            }

            this.pageData.page = num;
            this.getpagedata();
        },
        changeLayout(type) {
            let $ = this.$;
            if (type === 1) {
                $('.right_box').show();
                $('.left-2').css('cssText', 'position: relative;width: 100%;');
            } else if (type === 2) {
                $('.right_box').hide();
                $('.left-2').css('cssText', 'position: absolute;width: 98%;');
            }
        }
    },
    mounted() {
        this.changeLayout(2);
    },
    destroyed() {
        this.changeLayout(1);
    }
}; 
</script>

<style>
.src4 {
    margin-top: 3%;
    float: left;
}
.src3 {
    float: right;
}
.src5 {
    margin: 0 auto;
}
.page_syss {
    position: relative;
    float: right;
    right: 30px;
    bottom: 40px;
    font-family: '微软雅黑';
    color: #5ca9d3;
    font-size: 15px;
    width: 340px;
    margin-top: 20px;
    margin-bottom: -20px;
    margin-right: -30px;
}
</style>